<template>
    <div>
        <!-- 该组件为面包屑导航 -->
        <div  style="color:white;" class="breadeCrumb">
            <i class="el-icon-s-unfold" @click="changeType" v-if="isCollapse"></i>
            <i class="el-icon-s-fold" @click="changeType" v-else></i>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="(item,index) in $route.meta" :key="index">
                    <router-link v-if="item.url" :to="item.url">{{item.name}}</router-link>
                    <a v-else><span>{{item.name}}</span></a>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
</template>

<script>
import { Breadcrumb,BreadcrumbItem} from 'element-ui';
export default {
    data(){
        return{
            isCollapse:true
        }
    },
    components:{
        "el-breadcrumb":Breadcrumb,
        "el-breadcrumb-item":BreadcrumbItem
    },
    methods:{
        changeType(){
        
            this.isCollapse = !this.isCollapse;
            
            this.$eventBus.$emit('changeIsCollapse',this.isCollapse)
            this.$eventBus.$emit('changeIsCollapse1',this.isCollapse)
            console.log(this.isCollapse)
        }
    }
}
</script>

<style lang="less" scoped>
.breadeCrumb{
    display: flex;
    align-items: center;
    font-weight: 700;
    i{
        margin-right:5px;
    }
    a{
        color:white;
    }
    a>span{
        color:#F9BE54;
        font-weight: 700;
    }
}
</style>